<template>
  <div id="fd-result">
    <div class="card">
      <div class="card-body">
        <form class="row">
          <input type="hidden" v-model.number="sc.pageNo" />
          <input type="hidden" v-model.number="sc.pageSize" />
          <div class="col-1">
            <input
              type="textfield"
              class="form-control"
              placeholder="航空公司"
              size="8"
              v-model.trim="carrier"
            />
          </div>
          <div class="col-1">
            <input
              type="textfield"
              class="form-control"
              placeholder="出发机场"
              size="8"
              v-model.trim="dport"
            />
          </div>
          <div class="col-1">
            <input
              type="textfield"
              class="form-control"
              placeholder="到达机场"
              size="8"
              v-model.trim="aport"
            />
          </div>
          <div class="col-1">
            <input
              type="textfield"
              class="form-control"
              placeholder="舱位"
              size="6"
              v-model.trim="subclass"
            />
          </div>

          <div class="col">
            <button
              type="button"
              class="btn btn-primary ms-1"
              @click.stop="search()"
            >
              查找
            </button>
            <span class="ms-auto">
              <button
                type="button"
                @click.stop="deleteFdResult()"
                class="btn btn-danger me-5"
              >
                删除所有
              </button>
              <button
                type="button"
                class="btn btn-success"
                @click.stop="downloadFdResult()"
              >
                下载
              </button>
            </span>
          </div>
        </form>
      </div>
    </div>
    <table class="table table-response table-striped table-sm" id="tableData">
      <thead>
        <tr>
          <th>航空公司</th>
          <th>出发城市</th>
          <th>到达城市</th>
          <th>FD日期</th>
          <th>舱位</th>
          <th>单程价格</th>
          <th>往返价格</th>
          <th>生效日期</th>
          <th>失效日期</th>
          <th>RuleNo</th>
          <th>更新时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="fd in dataList">
          <td>{{ fd.carrier }}</td>
          <td>{{ fd.dport }}</td>
          <td>{{ fd.aport }}</td>
          <td>{{ fd.ddate }}</td>
          <td>{{ fd.subclass }}/{{ fd.fareclass }}/{{ fd.cabinclass }}</td>
          <td>{{ fd.owPrice }}</td>
          <td>{{ fd.rtPrice }}</td>
          <td>{{ fd.effectDate }}</td>
          <td>{{ fd.expireDate }}</td>
          <td>{{ fd.ruleno }}</td>
          <td>{{ fd.lastupdate }}</td>
        </tr>
      </tbody>
    </table>

    <nav id="pagination-box" class="float-end">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>

    <my-modal-prompt ref="modalPrompt" :nullable="modalNullable">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
  </div>
</template>

<script>
import { searchFdResults, deleteAllFdResults } from "@/api/misc.js";
import { APP_FLIGHT_PATH } from "@/common/common.js";
import MyDatePicker from "@/components/my-datepicker.vue";
import MyPagination from "@/components/my-pagination.vue";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";

export default {
  components: {
    MyDatePicker,
    MyPagination,
    MyModalPrompt,
  },
  data() {
    return {
      dataList: [],
      id: 0,

      carrier: "",
      dport: "",
      aport: "",
      subclass: "",
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 25,
        pageTotal: 0,
      },

      modalTitle: "",
      modalNullable: false,
    };
  },
  mounted: function () {
    this.search();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.carrier": this.carrier,
        "sc.dport": this.dport,
        "sc.aport": this.aport,
        "sc.subclass": this.subclass,
      };
      searchFdResults(params, (jsonResult) => {
        this.dataList = jsonResult.dataList;
        this.sc = jsonResult.page;
      });
    },
    downloadFdResult: function () {
      const params =
        "sc.pageNo=" +
        this.sc.pageNo +
        "&sc.pageSize=" +
        this.sc.pageSize +
        "&sc.carrier=" +
        this.carrier +
        "&sc.dport=" +
        this.dport +
        "&sc.aport=" +
        this.aport +
        "&sc.subclass=" +
        this.subclass;
      const url = APP_FLIGHT_PATH + "/downloadFdResult.do?" + params;
      window.open(url);
    },
    deleteFdResult: function () {
      this.modalTitle = "确认删除已下载的FD结果（不包括今天下载的）吗？";
      this.modalNullable = true;
      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then((remark) => {
          deleteAllFdResults((v) => {
            if (v.status === "OK") {
              this.showErrMsg(v.desc);
              this.search();
            } else {
              this.showErrMsg(v.errmsg);
            }
          });
        })
        .catch((ex) => {});
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>